<template>
    <div id="rBar3">
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: "echarts",
    data: function () {
        return {

        }
    },
    mounted: function () {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById('rBar3')).setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#fff'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ['2022.10.14', '', '', '2022.10.17', '', '', '2022.10.20'],
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#fff'
                            }
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '工单数',
                        min: 0,
                        max: 50,
                        axisLabel: {
                            formatter: '{value}',
                            color: '#fff'
                        }
                    },
                    {
                        type: 'value',
                        name: '及时率',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            formatter: '{value}',
                            color: '#fff'
                        }
                    }
                ],
                series: [
                    {
                        name: '工单数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '次';
                            }
                        },
                        data: [16, 20, 15, 7, 25, 18, 21]
                    },
                    {
                        name: '及时率',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value + '%';
                            }
                        },
                        data: [70, 75, 66, 36, 80, 72, 80]
                    }
                ]
            })
        }
    }
}
</script>

<style scoped lang="less">
#rBar3 {
    width: 100%;
    height: 100%;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>